<template>
	<view class="modal" :class="[showModal ? 'modal-show':'']">
		<view class="wrap" :class="[showModal ? 'update-user-show':'']">
			<view class="info-wrap">
				<view class="info-right-status">{{expressCompany}}</view>
				<view class="info-right-status info-right-status1">
					{{logistics.nu ? logistics.nu :'暂无单号'}}
				</view>
				<view class="copy line_center" @tap='copy'>复制</view>
				<view class="close" @tap='close'>
					<uni-icons type='close' size="30" color='#DEDBDB'></uni-icons>
				</view>
			</view>
			<scroll-view class="logistics-info-wrap" scroll-y="true">
				<view class="logistics-info-con" v-if='logistics.data'>
					<template v-for='(item,index) in logistics.data'>
						<view class="logistics-info-item" v-if='index == 0'>
							<view class="logistics-info-icon-check">
								<uni-icons type="checkbox-filled" color="#44C082" size="20"></uni-icons>
							</view>
							<view class="logistics-info-text">
								<view class="logistics-info-text1">{{item.context}}</view>
								<view class="logistics-info-text2">{{item.time}}</view>
							</view>
						</view>
						<view class="logistics-info-item" v-else>
							<view class="logistics-info-icon"></view>
							<view class="logistics-info-text">
								<view class="logistics-info-text1 logistics-info-text3">{{item.context}}</view>
								<view class="logistics-info-text2">{{item.time}}</view>
							</view>
						</view>
					</template>
				</view>
				<no-data v-else text='暂未查询到物流信息'></no-data>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showPage:false,
				expressCompany:'',
				logistics: {},
				orderId:'',
				showModal:false,
			}
		},
		
		methods: {
			getAuctionPage() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let that = this;
				app.globalRequest({
					api:app.getApi().order.Logistics,
					data:{
						order_id:that.orderId
					}
				}).then(res => {
					if (res.code == 0) {
						if(res.data.returnCode == 500){
							that.logistics = {};
							return;
						}
						that.logistics = res.data;
					}
				}).catch(err => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			selectPhoneNumber(str) {
				var regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
				var phoneNums = str.match(regx);
				if (phoneNums) {
					for (var i = 0; i < phoneNums.length; i++) {
						var temp = phoneNums[i]
						str = str.replace(phoneNums[i], '<a href="tel:' + temp +
							'"  class="copy phone-num" style=" text-decoration: underline;color: #2878FF;">' + temp +
							'</a>');
					}
				}
				return str;
			},
			copy() {
				uni.setClipboardData({
					data: this.logistics.nu,
					complete() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							mask: true
						})
					}
				})
			},
			close(){
				this.showModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 222;
		opacity: 0;
		visibility: hidden;
		transition: all 0.1s ease-in-out;
	}
	
	.modal-show {
		opacity: 1;
		visibility: visible;
	}
	.wrap {
		width: 100%;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		font-size: 26rpx;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		padding:0 20rpx;
		box-sizing: border-box;
	}
	.update-user-show {
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
	.info-wrap {
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		padding:0rpx 10rpx;
		position: relative;
		.copy{
			color:#44C082;
		}
		.info-right-status1{
			padding:0 24rpx;
		}
		.close{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right:0rpx;
			top:16rpx;
		}
	}

	.logistics-info-wrap {
		width: 100%;
		height: 700rpx;
		padding: 0rpx 0rpx 30rpx;
		background: #fff;
		border-radius: 8rpx;

		.title {
			font-size: 26rpx;
			font-weight: bold;
			padding-left: 14rpx;
		}
	}

	.logistics-info-con {
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 30rpx;
	}

	.logistics-info-item {
		display: flex;
		border-left: 1px solid rgba(191, 191, 191, 0.4);
		padding-bottom: 40rpx;
		font-size: 26rpx;

		&:last-of-type {
			border-left: 0;
		}

		.logistics-info-icon {
			width: 20rpx;
			height: 20rpx;
			background: rgba(191, 191, 191, 1);
			border-radius: 100%;
			flex-shrink: 0;
			margin-right: 36rpx;
			margin-left: -12rpx;
		}

		.logistics-info-icon-check {
			width: 40rpx;
			height: 40rpx;
			border-radius: 100%;
			flex-shrink: 0;
			margin-right: 32rpx;
			margin-left: -22rpx;
			margin-top: -10rpx;
		}

		.logistics-info-text {
			line-height: 40rpx;
		}

		.logistics-info-text2 {
			color: #BFBFBF;
			padding-top: 12rpx;
		}

		.logistics-info-text3 {
			color: #BFBFBF;
		}
	}
</style>
